<template>
  <div class="map-container">
    <div class="mapTop">
      地址：
      <div style="display: inline-block">
        <el-input
          v-model="formData.address"
          size="medium"
          :disabled="true"
          placeholder="地址"
        ></el-input>
      </div>
      经度：
      <div style="display: inline-block">
        <el-input
          v-model="formData.lng"
          size="medium"
          :disabled="true"
          placeholder="经度"
        ></el-input>
      </div>
      纬度：
      <div style="display: inline-block">
        <el-input
          v-model="formData.lat"
          size="medium"
          :disabled="true"
          placeholder="纬度"
        ></el-input>
      </div>
      <div style="display: inline-block">
        <el-button
          size="medium"
          type="primary"
          class="fr"
          @click="handleResult"
        >
          确定
        </el-button>
      </div>
    </div>
    <div id="mapStyle" class="container"></div>
  </div>
</template>

<script>
  import mapData from "@/utils/data";
  import Bus from "@/utils/bus";
  export default {
    name: "Map",
    components: {},
    props: {
      keyword: {
        type: String,
        default: "",
      },
    },
    data() {
      return {
        imgThumb: require("@/assets/images/img.jpg"),
        formData: {},
        location: {
          lng: "",
          lat: "",
        },
        marker: null,
        map: null,
        localSearch: null,
      };
    },
    created() {},
    mounted() {
      this.init();
    },
    methods: {
      init() {
        this.$nextTick(() => {
          // this.init();
          this.map = new BMapGL.Map("mapStyle");
          this.map.centerAndZoom(new BMapGL.Point(101.622473, 34.740396), 8);
          // 地图缩放控件
          this.localSearch = new BMapGL.LocalSearch(this.map);
          this.localSearch.enableAutoViewport(); //允许自动调节窗体大小
          this.clickHandler();
          this.map.setMapStyleV2({
            styleId: "0e5948460769123a23b5c7615b59ae9d",
          });
          this.getBoundary("河南省");
          if (this.keyword != "undefined")
            this.$set(this.formData, "address", this.keyword);
          else this.$set(this.formData, "address", "");
        });
      },
      getBoundary(params) {
        let _this = this;
        var bdary = new BMapGL.Boundary();
        var name = params; // '河南省';
        bdary.get(name, function (rs) {
          //获取行政区域
          _this.map.clearOverlays();
          var count = rs.boundaries.length; //行政区域的点有多少个
          var pointArray = [];
          for (var i = 0; i < count; i++) {
            var ply = new BMapGL.Polygon(rs.boundaries[i], {
              strokeWeight: 2, //设置多边形边线线粗
              strokeOpacity: 1, //设置多边形边线透明度0-1
              StrokeStyle: "solid", //设置多边形边线样式为实线或虚线，取值 solid 或 dashed
              strokeColor: "#2cc1bb", //设置多边形边线颜色
              fillColor: "#2cc1bb", //设置多边形填充颜色
              fillOpacity: 0.1, //设置多边形填充颜色透明度0-1 注：标红的地放你们可以去掉看一下效果，自己体验一下
            }); //建立多边形覆盖物
            _this.map.addOverlay(ply); //添加覆盖物
            pointArray = pointArray.concat(ply.getPath());
          }
          _this.map.enableScrollWheelZoom(true);
          _this.map.setViewport(pointArray);
          if (_this.keyword) {
            _this.searchByStationName();
          }
        });
      },
      clickHandler(content, marker) {
        let _this = this;
        this.map.addEventListener("click", function (e) {
          let lng = e.point.lng;
          let lat = e.point.lat;
          _this.addMapOverlay(lng, lat);
          _this.$set(_this.formData, "lng", lng);
          _this.$set(_this.formData, "lat", lat);
        });
      },
      addMapOverlay(lng, lat) {
        let _this = this;
        if (this.marker) this.map.removeOverlay(this.marker);
        var point = new BMapGL.Point(lng, lat);
        this.marker = new BMapGL.Marker(point); // 创建标注
        this.map.addOverlay(this.marker); // 将标注添加到地图中
        var geoc = new BMapGL.Geocoder();
        geoc.getLocation(point, function (rs) {
          var addComp = rs.addressComponents;
          let address =
            addComp.province +
            ", " +
            addComp.city +
            ", " +
            addComp.district +
            ", " +
            addComp.street +
            ", " +
            addComp.streetNumber;
          _this.$set(_this.formData, "address", address);
        });
      },
      searchByStationName() {
        let _this = this;
        this.localSearch.setSearchCompleteCallback(function (searchResult) {
          var poi = searchResult.getPoi(0);
          let lng = poi.point.lng;
          let lat = poi.point.lat;
          _this.$set(_this.formData, "lng", lng);
          _this.$set(_this.formData, "lat", lat);
          _this.map.centerAndZoom(poi.point, 13);
          _this.marker = new BMapGL.Marker(
            new BMapGL.Point(poi.point.lng, poi.point.lat)
          ); // 创建标注，为要查询的地址对应的经纬度
          _this.map.addOverlay(_this.marker);
        });
        this.localSearch.search(this.keyword);
      },
      handleResult() {
        console.log(11111);
        this.$emit("result", this.formData);
      },
    },
  };
</script>
<style>
  .map-container .BMapGLLabel a {
    color: #333;
  }
  .map-container .BMapGL_bubble_content {
    padding-top: 20px;
  }
  .map-container .mapThumb {
    width: 100%;
    height: 220px;
    margin-bottom: 10px;
    overflow: hidden;
  }
  .map-container .mapThumb img {
    width: 100%;
  }
  .mapText {
    display: grid;
    grid-template-columns: 50% 50%;
    line-height: 200%;
  }
  .mapText .address {
    grid-column-start: 1;
    grid-column-end: 3;
  }
</style>
<style lang="scss" scoped>
  .map-container {
    position: relative;
    padding: 0 !important;
    margin: 0 !important;
    .container {
      width: 100%;
      height: calc(100vh - 65px);
    }
    .mapTop {
      margin-bottom: 20px;
    }
    .mapTop > div {
      width: 20%;
      display: inline-block;
      margin-right: 10px;
      vertical-align: middle;
      &:first-child {
        width: 35%;
      }
      &:last-child {
        width: 70px;
      }
    }
    .map-menu {
      position: absolute;
      right: 0;
      top: calc((100vh - 480px) / 2);
      background: rgba($color: #2cc1bb, $alpha: 0.5);
      border-radius: 2px;
      .item {
        width: 80px;
        height: 80px;
        line-height: 80px;
        text-align: center;
        font-size: 12px;
        color: #fff;
        border-bottom: 1px solid #fff;
        cursor: pointer;
        &:last-child {
          border: none;
        }
        &.active {
          background: rgba($color: #2cc1bb, $alpha: 0.5);
        }
      }
    }
  }
</style>
